<!DOCTYPE html>
<html >
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
	<title>2d中国地图</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="./js/echarts.min.js"></script>
    <script type="text/javascript" src="./js/china.js"></script>
	<script src="./js/jquery-1.7.1.js"></script>
	<style>
		#chinaMap{
			width: 400px;
			height: 600px;
		}
	</style>
</head>
<body>
	<div id="chinaMap"></div>
	<script>
		// 地图
		// 地图色块数据
		var data = [{
				name: '北京',
				value: 5,
			},
			{
				name: '广东',
				value: 9,
			},
			{
				name: '上海',
				value: 3,
			},
		];
		// 标注数据
		var markData = [{
				coord: [116.416262, 39.918893],
				name: '北京',
				value: '北京',
			},
			{
				coord: [113.280628, 23.130019],
				name: '广东',
				value: '广州',
			},
			{
				coord: [121.48169, 31.231977],
				name: '上海',
				value: '上海',
			},
		];
		var option = {
			dataRange: {
				min: 0, //颜色区间的最小值
				max: 10, //颜色区间的最大值，和data中的最大值一致
				x: 'left',
				y: 'bottom',
				text: ['高', '低'], // 文本，默认为数值文本
				calculable: true,
				inRange: {
					//颜色区间
					color: ['#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
				},
				show: false
			},
	
			series: [{
				type: 'map',
				mapType: 'china',
				silent: true,
				itemStyle: {
					normal: {
						areaColor: "#8b8b8b" //区域颜色
					}
				},
				// roam: true,
				label: {
					normal: {
						show: true,
						fontSize: '12px',
						color: "transparent", //地图地名字体颜色
					}
				},
				data: data,
				//标注
				markPoint: {
					symbolSize: 50,
					itemStyle: {
						normal: {
							borderColor: '#33CBFF',
							color: '#33CBFF',
							borderWidth: 1, // 标注边线线宽，单位px，默认为1
							label: {
								show: true
							}
						}
					},
					data: markData
				}
			}]
		};
		var chart = echarts.init(document.getElementById('chinaMap'));
		chart.setOption(option);
	</script>
</body>
</html>